<template>
  <view class="com-order-dialog" v-if="show">
    <view class="title justify-between">
      <view class="flex flex-auto">
        <text>{{ info.name }}</text>
        <u-tag v-if="info.discount" text="会员折扣" type="primary" />
      </view>
      <u-icon name="close" bold size="15rpx" @click="emits('close'), (show = false)"></u-icon>
    </view>

    <!-- 口味标签 -->
    <view class="flex py-5rpx">
      <view class="mr-5rpx tag" v-if="info.spicy">
        {{ info.spicy }}
      </view>
      <view class="mr-5rpx tag" v-if="info.texture">
        {{ info.texture }}
      </view>
      <view class="mr-5rpx tag" v-if="info.flavor">
        {{ info.flavor }}
      </view>
    </view>

    <!-- 禁忌人群 -->
    <view class="limt-population" v-if="info.tabooPopulation">
      <text>禁忌人群: {{ info.tabooPopulation }} </text>
    </view>

    <!-- 助餐补贴 -->
    <view class="subsidy" v-if="info.subsidy">
      <text>助餐补贴: ¥{{ info.subsidy }} </text>
    </view>

    <!-- 备注 -->
    <view class="remark">
      <u-icon name="edit-pen" label="备注" size="10rpx" label-size="8rpx"></u-icon>
      <view class="flex py-5rpx">
        <view @click="addRemark(item)" v-for="(item, index) in remarks" class="mr-5rpx">
          <text :class="['false-btn', havedRemarkItem(item.name) ? 'active' : '']">{{ item.name }}</text>
        </view>
      </view>
      <!-- 备注区域 -->
      <text class="remark-txt">{{ info.remark || "暂无备注信息" }}</text>
    </view>
    <common-popup ref="refRemarkPopup" />
  </view>
</template>
<script setup>
import { computed, onBeforeUnmount, ref } from "vue";

const show = ref(false);

const info = ref({});
const refRemarkPopup = ref(null);
// 备注预设
const remarks = [
  { name: "微辣" },
  { name: "加辣" },
  {
    name: "自定义",
    func: () => {
      // 自定义备注
      refRemarkPopup.value.open({
        title: "自定义备注",
        content: info.value.remark,
        confirmText: "保存",
        cancelText: "取消",
        onConfirm: (popConfig) => {
          console.log("popupConfirm >> popConfig", popConfig);
          if (/^\[.*\] /.test(info.value.remark)) {
            // 匹配 popConfig.content 是否已有备注
            if (/^\[.*\] /.test(info.value.remark)) {
              info.value.remark = popConfig.content;
            } else {
              // info.value.remark
              // 使用非贪婪匹配避免回溯
              info.value.remark = info.value.remark.match(/\[.*?\] /)?.[0] + popConfig.content;
            }
          } else {
            info.value.remark = popConfig.content;
          }
        },
      });
    },
  },
];

// 监听购物车菜品选中事件
uni.$on("cart-item:selected", (data) => {
  info.value = data;
  show.value = true;
});

onBeforeUnmount(() => {
  uni.$off("cart-item:selected");
});

// 添加备注

const havedRemarkItem = computed(() => {
  return (name) => {
    if (name == "自定义") return false;
    return /^\[.*\]/.test(info.value.remark) && info.value.remark?.indexOf(name) > -1;
  };
});

const addSpicyRemark = (name) => {
  // 使用字符串操作替代正则表达式
  const remarkPrefix = `[${name}] `;
  const existingRemarkPrefix = info.value.remark?.startsWith('[') ? info.value.remark.split('] ')[0] + '] ' : '';
  
  if (existingRemarkPrefix) {
    info.value.remark = info.value.remark.replace(existingRemarkPrefix, remarkPrefix);
  } else {
    info.value.remark = remarkPrefix + (info.value.remark || "");
  }
};

const addRemark = (item) => {
  if (typeof item.func === "function") return item.func();
  switch (item.name) {
    case "微辣":
      addSpicyRemark(item.name);
      break;
    case "加辣":
      addSpicyRemark(item.name);
      break;
    default:
  }
};

const close = () => (show.value = false);

const emits = defineEmits(["close"]);

defineExpose({ close });
</script>
<style lang="scss" scoped>
.com-order-dialog {
  background-color: white;
  padding: 20rpx;
  min-height: 60vh;
  height: 100%;
  box-sizing: border-box;
  font-size: 12rpx;
  border-radius: 5rpx;
  align-self: flex-start;

  .title {
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: bold;

    text {
      margin-right: 5rpx;
    }
  }

  .limt-population {
    font-size: 10rpx;
    padding: 5rpx 0;
  }

  .subsidy {
    font-size: 10rpx;
    padding: 5rpx 0;
    color: var(--kui-color-theme);
    font-weight: bold;
  }

  .remark {
    font-size: 10rpx;
    margin-top: 10rpx;

    .false-btn {
      display: block;
      margin-top: 5rpx;
      border-radius: 5rpx;
      padding: 5rpx;
      background-color: rgb(241, 241, 241);
      // border: 1px solid lightgray;

      &.active {
        background-color: var(--kui-color-theme);
        color: white;
      }
    }

    .remark-txt {
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 5px;
      margin-top: 10px;
      display: block;
      color: grey;
    }
  }
}
</style>
